<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>
    视频播放页面
  </title>
  <style>
    #video-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow: hidden;
      position: relative; /* 添加相对定位 */
    }

    .video-item {
      width: 33%;
      padding: 10px;
      box-sizing: border-box;
    }

    @media screen and (max-width: 767px) {
      .video-item {
        width: 100%;
      }
    }

    .custom-button {
      /*position: absolute; */
      top: 10px; /* 距顶部的距离 */
      right: 10px; /* 距右侧的距离 */
    }

    .controls-div {
      display: flex;
      justify-content: space-between;
    }

  </style>
</head>

<body>
<input type="file" id="video-file" accept="video/mp4" multiple>
<button onclick="addVideo()">
  添加视频
</button>
<div id="video-container">
</div>
<script>
  function addVideo() {
    let fileInput = document.getElementById('video-file');
    console.log(fileInput.files)
    if (fileInput.files.length > 0) {

      let fileList = fileInput.files;

      for (let i = 0; i < fileList.length; i++) {
        let videoContainer = document.getElementById('video-container');

        let videoId = Math.floor(Math.random() * 100) + 1;

        // 创建 video 标签并设置属性
        let video = document.createElement('video');
        video.src = URL.createObjectURL(fileList[i]);
        video.autoplay = true;
        video.controls = true;
        video.style.width = '100%';
        video.style.height = 'auto';
        video.id = videoId;
        video.loop = true;
		video.volume = '0.5';

        // 创建删除按钮
        let deleteButton = document.createElement('button');
        deleteButton.innerHTML = '删除';
        deleteButton.className= 'custom-button';
        // 添加删除按钮点击事件监听器
        deleteButton.addEventListener('click',
                function() {
                  // 移除视频容器
                  videoContainer.removeChild(videoItem);
                  resetContainer();
                });

        // 创建音量调节按钮
        let volumeButton = document.createElement("input");
        volumeButton.type = "range";
        volumeButton.min = "0";
        volumeButton.max = "1";
        volumeButton.step = "0.01";
        volumeButton.value = "0.5";
        volumeButton.style.width = '40%'
        // 音量调节事件监听
        volumeButton.onchange = function() {
          setVolume(videoId, this.value);
        };

        let selectDom = createSpeed(videoId);

        // 创建包裹 video 的容器 div
        let videoItem = document.createElement('div');
        videoItem.className = 'video-item';


        // 创建包裹 操作按钮 的容器 div
        let controlsDiv = document.createElement('div');
        controlsDiv.className = 'controls-div';

        // 操作按钮容器整合
        controlsDiv.appendChild(volumeButton);
        controlsDiv.appendChild(selectDom);
        controlsDiv.appendChild(deleteButton);

        //video容器整合
        videoItem.appendChild(video);
        videoItem.appendChild(controlsDiv)

        // 将容器添加到页面中
        videoContainer.appendChild(videoItem);

      }

    }
    resetContainer();
  }

  function resetContainer() {
    let videoContainer = document.getElementById('video-container');
    // 根据视频数量调整布局
    let videos = videoContainer.getElementsByClassName('video-item');

    let userAgentInfo = navigator.userAgent;
    let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    let isMobile = false;
    for (let i = 0; i < Agents.length; i++) {
      if (userAgentInfo.indexOf(Agents[i]) > 0) {
        isMobile = true;
        break;
      }
    }

    if (isMobile) {
      videoContainer.style.flexDirection = (videos.length > 3) ? 'row' : 'column';
    } else {
      videoContainer.style.flexDirection = (videos.length > 1) ? 'row' : 'column';
    }

    for (let i = 0; i < videos.length; i++) {
      videos[i].style.width = (videos.length > ((isMobile) ? 3 : 1)) ? '33%' : '100%';
    }
  }

  function setVolume(videoId, value) {
    let video = document.getElementById(videoId);
    console.log("setVolume", videoId, value)
    if (video) {
      video.volume = value;
    }
  }

  function changeSpeed(videoId) {
    let video = document.getElementById(videoId);
    let value = selectedSpeed = document.getElementById("speedSelect" + videoId).value;
    console.log("changeSpeed", videoId, value)
    video.playbackRate = value;
  }
  
  
  function createSpeed(videoId) {
    let selectDom = document.createElement("select");
    selectDom.id = "speedSelect" + videoId;
    selectDom.onchange = function() {
      changeSpeed(videoId);
    };
    selectDom.appendChild(createSelectOption(0.5));
    selectDom.appendChild(createSelectOption(0.75));
    let selectOption = createSelectOption(1.0);
    selectOption.selected = true;
    selectDom.appendChild(selectOption);
    selectDom.appendChild(createSelectOption(1.25));
    selectDom.appendChild(createSelectOption(1.5));
    selectDom.appendChild(createSelectOption(1.75));
    selectDom.appendChild(createSelectOption(2.0));

    return selectDom;
  }

  function createSelectOption(param) {
    let option = document.createElement("option");
    option.value = param;
    option.textContent = param + 'x';

    return option;
  }
</script>
</body>

</html>